<template>
	<view class="content columnbox wdh-100">
		<view class="imglist wdh-100">
			<view class="rowbox one-img" v-for="(item,index) in list" :key="index" @click="">
				<view @click="deletCase(item)" class="delet-cion">
					<u-icon color="#000" name="close-circle-fill"></u-icon>
				</view>
				<image :src="item.image" @click="previewImg(item.image)" mode="aspectFill" class="item">
				</image>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<u-empty v-if="list.length==0" text='暂无信息' mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view class="bottom-box wdh-100 rowbox ">
			<view v-if="submitflag" class="rowbox send-btn wdh-100" style="background: #f6f7fb;color:  #96949e;">
				上传
			</view>
			<view v-else class="rowbox send-btn wdh-100" @click="addImg">
				上传
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				list: [],
				submitflag: false
			};
		},
		onLoad(options) {
			this.getCase()
		},
		methods: {
			deletCase(v) {
				uni.showModal({
					title: "是否确认删除该病例",
					success: (res) => {
						if (res.confirm) {
							this.$req.post('/doctor/stjgbldel', {
								id: v.id
							}).then(res => {
								this.getCase()
							})
						}
					}
				})
			},
			previewImg(image) {
				uni.previewImage({
					urls: this.imglist,
					current: image
				})
			},
			getCase() {
				this.$req.post('/doctor/stjgbl', {
					userid: uni.getStorageSync('uid')
				}).then(res => {
					this.list = res.data.data
					this.imglist = res.data.data.map(img => {
						return img.image
					})
				})
			},
			addImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.$req.uploadImg(res.tempFilePaths[0]).then(resp => {
							this.$req.post('/doctor/stjgbladd', {
								image: resp.data.data,
								userid: uni.getStorageSync('uid')
							}).then(res => {
								this.getCase()
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imglist {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx;
		gap: 20rpx;

		.one-img {
			position: relative;
			width: 25%;
			margin-bottom: 20rpx;

			.delet-cion {
				position: absolute;
				z-index: 2;
				top: 0rpx;
				right: 10rpx;
				background: #fff;
				border-radius: 100rpx;
			}

		}

		& .item {
			width: 150rpx;
			height: 150rpx;
			border: #e5e5e5 solid 1px;
			border-radius: 10rpx;
		}
	}
</style>